import AltContainer from 'alt-container';
import React from 'react';
import Notes from './Notes.jsx';
import NoteActions from '../actions/NoteActions';
import NoteStore from '../stores/NoteStore';
import LaneActions from '../actions/LaneActions'

export default class Lane extends React.Component {
  render() {
    const { lane, ...props } = this.props
    console.log(lane.notes, '--ln')
    console.log(NoteStore.getNotesByIds(lane.notes), '--a')
    return (
      <div {...props}>
        <div className="lane-header">
          <div className="lane-add-note">
            <button onClick={this.addNote}>+</button>
          </div>
          <div className="lane-name">{lane.name}</div>
        </div>
        <AltContainer
          stores={[NoteStore]}
          inject={{
            // notes: () => NoteStore.getNotesByIds(lane.notes)
            notes: () => lane.notes || []
          }}
        >
          <Notes onEdit={this.editNote} onDelete={this.deleteNote} />
        </AltContainer>
      </div>
    )
  }
  editNote(id, task) {
    // Don't modify if trying set an empty value
    if(!task.trim()) {
      return;
    }
    NoteActions.update({id, task});
  }
  addNote = () => {
    const note = NoteActions.create({task: 'New task'})
    LaneActions.attachToLane({
      note: note,
      laneId: this.props.lane.id,
    })
  }
  deleteNote = (noteId, e) => {
    e.stopPropagation();
    const laneId = this.props.lane.id
    LaneActions.detachFromLane({laneId, noteId})
    NoteActions.delete(noteId)
  }
}